<!--
 * @Author: leo
 * @Date: 2024-08-12 16:27:33
 * @LastEditors: leo
 * @Description:
-->
<template>
  <div class="home">
    <Header />

    <div class="app-content" v-loading="loading">
      <router-view v-slot="{ Component }">
        <transition name="move" mode="out-in">
          <div class="app-view">
            <component :is="Component" v-if="!route.meta.keepAlive" :key="route.meta.pageId" />
            <keep-alive>
              <component :is="Component" v-if="route.meta.keepAlive" :key="route.meta.pageId" />
            </keep-alive>
          </div>
        </transition>
      </router-view>
    </div>
  </div>
</template>

<script setup>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import { useRoute, useRouter } from 'vue-router'
import { computed } from 'vue'
import { useStore } from 'vuex'
import SideBar from '@/components/common/SideBar.vue'
import Header from '@/components/common/Header.vue'

const route = useRoute()
const store = useStore()

const loading = computed(() => {
  return store.state.app.loading
})
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;

  .app-content {
    width: calc(100% - 50px);
    height: calc(100% - 85px);
    margin: 10px 25px;
    border-radius: 6px;
    border: 1px solid #e9eaec;
    overflow: auto;
    &::-webkit-scrollbar {
      display: none;
    }
    // overflow-y: auto;
    .app-view {
      width: calc(100% - 50px);
      height: calc(100% - 85px);
    }
    // margin-left: 200px;
  }
}
</style>
